@use "../../variables" as *;

body {
  .el-button {
    --el-color-primary: #{$qf-primary};
    --el-button-hover-border-color: #{$qf-primary2};
    --el-button-hover-bg-color: #{$qf-primary2};
    --el-button-bg-color: #{$qf-color-bg10};
    --el-button-border-color: #{$qf-color-bg7};
    --el-button-hover-link-text-color: #{$qf-color-white};
    &:not(.el-button--primary, .el-button--text, .is-plain):hover {
      background-color: $qf-color-bg7;
      border-color: $qf-color-bg7;
    }
  }
  .el-button--primary {
    background-image: $qf-primary-active1;
    color: $qf-color-white;
    border-color: $qf-primary;
    background-color: $qf-primary;
    &:hover {
      background-image: none;
    }
    &:active {
      background-image: none;
    }
    &.el-button.is-disabled {
      background-image: $qf-color-disabled;
      border-color: $qf-color-disabled-border;
      color: #{$qf-color-disabled-text};
      &:hover {
        background-image: $qf-color-disabled;
        color: #{$qf-color-disabled-text};
      }
      &:active {
        color: #{$qf-color-disabled-text};
        background-image: $qf-color-disabled;
      }
    }
  }
  .el-button--text {
    color: $qf-primary;
    &:hover {
      color: $qf-primary2;
    }
    &:active {
      color: $qf-primary2;
    }
  }
  .el-button--danger {
    --el-button-bg-color: #{$qf-primary3};
    --el-button-border-color: #{$qf-primary3};
    --el-button-disabled-bg-color: #{$qf-color-disabled-border};
    --el-button-disabled-border-color: #{$qf-color-disabled-border};
    --el-button-disabled-text-color: #{$qf-color-disabled-text};
  }
  .el-button.is-loading:before {
    background-color: transparent;
  }
}